<template>
	<app-layout>
	<view >
		
	
	
		
		<!-- 10.26 弹窗 珠宝店价格 -->
		<movable-area class="movable" :style="{height: `calc(100% - ${BotHeight}rpx)`}">
			<movable-view @click="jump('/pages/store/transfer/transfer')" class="movable-item" direction="all" x="750"
				y="962rpx" :inertia="true">
				<!-- y=976 -->
				<image :lazy-load="true" class="quick" mode="widthFix"
					:src="imgprefix + '/web/uploads/tasklist/valueflo.jpg?time=' + time"></image>
			</movable-view>
		</movable-area>
		<!-- <view class="user-shop"
			:style="{'background-image': 'url('+imgprefix+'/web/uploads/mall1/20210617/shopbg.jpg);'}">
			<view class="user-info" v-if="isLogin">
				<view class="ucenter" @click="goUser">
					个人中心>>>
				</view>
				<view class="user-info-some">
					<image class="avatar" load-lazy="true" :src="userInfo.options.avatar"></image>
					<view class="nickname">
						<view class="nick-nick">{{userInfo.nickname}}</view>
					</view>
					<button v-if="canUserProfile" plain @click="getUserPro" class="refre-button">
						刷新
					</button>
					<button v-else open-type="getUserInfo" class="refre-button" plain @getuserinfo="getUserInfo"
						lang="zh_CN">
						刷新
					</button>
				</view>
				<view class="opensuc" v-if="issuchop == true">
					<view class="sucimgs">
						<image src="../../static/image/index/appsuc.png" class="subimage"></image>
						<view class="sucshop">
							您已成功开通珠宝店
						</view>
					</view>
					<view class="checkshop" @click="toMyStore">
						进入珠宝店>>
					</view>
				</view>
			</view>
			<view class="nologin" v-else>
				<app-form-id>
					<view class="login-btn" @click="callLogin">点击登录</view>
				</app-form-id>
			</view>
		</view> -->
		<!-- 挣钱养家 -->
		<view class="topbg" @click="jump(applyimg[1].url)">
			<image :src="applyimg[1].icon_url" class="image" mode="widthFix" :lazy-load="true"></image>
		</view>
		<view style="background-color: rgba(9,186,7,.03);" class="fenxiao"
			@click="goToIndex">
			<view class="fx-zi">
				群接龙
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view>
		<app-my-order marginMo="24rpx auto" :margin="true" :round="true" :theme="getTheme"></app-my-order>
		<view class="fenxiao" @click="jump('/pages/pt/apelled/apelled')">
			<view class="fx-zi">
				我的拼团
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view>
		<!-- <view class="fenxiao" @click="jump('/pages/consumer/addcoupon/addcoupon')">
			<view class="fx-zi">
				群主发放抵用券
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view> -->
		<!-- <view class="fenxiao" @click="jump('/pages/user-center/storeidqr/storeidqr')">
			<view class="fx-zi">
				生成实体店二维码
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view> -->
		<view style="background-color: antiquewhite;" class="fenxiao" v-if="isbind"
			@click="jump('/pages/user-center/groupcoup/groupcoup')">
			<view class="fx-zi">
				群主发放抵用券列表
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view>

		<view class="fenxiao" @click="jump('/pages/consumer/couponlist/couponlist')">
			<view class="fx-zi">
				我的抵用券
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view>
		<view style="background-color: antiquewhite;" class="fenxiao" v-if="isbind"
			@click="jump('/pages/consumer/addredpak/addredpak')">
			<view class="fx-zi">
				群主发放金币红包
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view>
		<view style="background-color: antiquewhite;" class="fenxiao" v-if="isbind"
			@click="jump('/pages/consumer/credpaklist/credpaklist')">
			<view class="fx-zi">
				群主创建的金币红包列表
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view>
		<view class="fenxiao" @click="jump('/pages/consumer/redpaklist/redpaklist')">
			<view class="fx-zi">
				我收到的金币红包
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view>
		<view style="background-color: antiquewhite;" class="fenxiao" v-if="isbind"
			@click="jump('/pages/user-center/groupulist/groupulist?mall_id='+mall_id)">
			<view class="fx-zi">
				群主当天发放金币
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view>
		<view style="background-color: antiquewhite;" class="fenxiao" v-if="isbind"
			@click="jump('/pages/user-center/ranklist/ranklist?mall_id='+mall_id)">
			<view class="fx-zi">
				群主查看当天金币
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view>
		<view class="fenxiao" @click="jump('/pages/user-center/charts/charts')">
			<view class="fx-zi">
				群里金币排行
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view>
		<view class="fenxiao" @click="jump('/pages/entity/followlist')">
			<view class="fx-zi">
				城市实体店，主播，子品牌收藏
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view>
		<view class="fenxiao" @click="jump('/pages/user-center/answer/answer')">
			<view class="fx-zi">
				问卷调查
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view>
		<!-- 常用工具 -->
		<view class="app-my-service" v-if="userCenter.is_menu_status == 1">
			<view class="title" v-if="userCenter.menu_title">{{userCenter.menu_title}}</view>
			<view class="list" :class="[listStyle]">
				<view class="item" v-for="(item, index) in userCenter.menus" :key="index">
					<app-jump-button form :url="item.link_url" :open_type="item.open_type" :item="item"
						:arrangement="`${userCenter.menu_style === '1' ? 'row' : userCenter.menu_style === '2' ? 'column' : ''}`">
						<view style="width: 100%" class="item-container"
							:class="[userCenter.menu_style=='1'?'dir-left-nowrap cross-center':'',userCenter.menu_style=='2'?'dir-top-nowrap cross-center':'',]">
							<view class="box-grow-0">
								<image :src="item.icon_url" class="icon"></image>
							</view>
							<view class="box-grow-1" style="max-width: 100%">
								<view class="name">{{item.name}}</view>
							</view>
							<view class="box-grow-0" v-if="userCenter.menu_style=='1'">
								<image src="/static/image/icon/arrow-right.png" class="arrow"></image>
							</view>
						</view>
					</app-jump-button>
				</view>
			</view>
		</view>
		<view class="fenxiao" @click="jump('/pages/share/index/index')">
			<view class="fx-zi">
				可提现佣金
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view>
		<view class="fenxiao" @click="jump('/pages/sixty/user-center/user-center')">
			<view class="fx-zi">
				嗨我来了个人主页
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view>
		<!-- 申请成功前 -->
		<view class="besuc-app">
			<!-- 导航1 -->
			<!-- 176-20 -->
			<!-- <view class="">
				<app-navigation-icon navHeight="156" iconRadius="16rpx" navMargin="20rpx auto" :navs="navs"
					background="#f7f7f7" :scroll="true" columns="5" :rows="2">
				</app-navigation-icon>
			</view> -->
			<!-- banner -->
			<view v-if="banners.length > 0" style="width: 686rpx;margin: 20rpx auto 32rpx;border-radius: 32rpx;">
				<app-swiper :list="banners" borderRadius="32" mode="rect" name="icon_url" :height="242"
					:autoplay="true">
				</app-swiper>
			</view>
			<!-- <view class="bepartner" @click="toapply" v-if="issuchop == false">
				<view class="bebg">
					<image src="../../static/image/index/bgs1.png"></image>
				</view>

				<view class="beimg">
					<image src="../../static/image/index/bepart.png" alt=""></image>
				</view>

				<view class="befont">
					开店申请
				</view>
			</view> -->
			<!-- 9.23 添加 -->
			<view class="today" @click="jump(turnover[3].url)">
				<image :src="turnover[3].icon_url" class="image" mode="widthFix" :lazy-load="true"></image>
			</view>
			<view class="today" @click="toapply(applyimg[0].url)">
				<image :src="applyimg[0].icon_url" class="image" mode="widthFix" :lazy-load="true"></image>
			</view>
			<!-- 12.02 取消店主也看不到 -->
			<!-- <view class="moturnover" v-if="issuchop == true">
				<view class="moturnover-item">
					<image :src="item.icon_url" v-for="(item,index) in turnover" :key="index" v-if="index < 2"
						@click="jump(item.url)" mode="widthFix"></image>
				</view>
				<view class="moturnover-bottom" v-for="(item,index) in turnover" :key="index" v-if="index == 2"
					@click="jump(item.url)">
					<image :src="item.icon_url" mode="widthFix"></image>
				</view>
			</view> -->
			<!-- 搜索 -->
			<!-- <app-search-for :value="value"></app-search-for> -->
			<view class="search-area">
				<view class="search main-center" @click="toSearch">
					<image class="icon-search" src="/static/image/icon/icon-search.png"></image>
					<text>搜朋友的珠宝店</text>
				</view>
			</view>
			<view class="beturnstore" v-for="(item,index) in list" :key="index" @click="jumptostore(item)">
				<view class="beturnimage">
					<image class="image" :src="item.user.userInfo.avatar"></image>
				</view>
				<view class="beturntext">
					{{item.name}}的珠宝店
				</view>
			</view>
		</view>

		<!-- <view class="guideuser" v-if="isguide" @touchmove.stop.prevent="moveStop">
			<view class="guideb">
				<view class="guidecenter">
					个人中心
				</view>
			</view>
			<image class="guideimg" src="../../static/image/guide/point.png" mode=""></image>
			<image src="../../static/image/guide/decorate.png" class="guidec" mode=""></image>
			<view class="guidecon">
				请点击个人中心，里面有自己的许多信息
			</view>
			<view class="guidenow" @click="noguide">
				<image class="guiimg" src="../../static/image/guide/iknow.png" mode=""></image>
			</view>
		</view> -->
		<!-- 返回顶部 -->
		<view class="quick-box dir-top-nowrap" style="bottom: 180rpx" v-if="opacity == 1">
			<image @click="backTop" class="quick-btn" src="../../static/image/icon/back-top.png"></image>
		</view>
		<view class="">
			<tastlist ispopop :movepop="false" flotop="360rpx" floleft="0" ref="task"></tastlist>
		</view>
		<app-tab-bar ></app-tab-bar>
	</view>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import appTabBar from "../../components/basic-component/app-tab-bar/app-tab-bar.vue"
	import appSearchFor from '../../components/page-component/app-search-for/app-search-for.vue'
	import appNavigationIcon from '../../components/page-component/app-navigation-icon/app-navigation-icon.vue'
	import appSwiper from '../../components/page-component/app-swiper/app-swiper.vue'
	import AppMyOrder from '../../components/page-component/app-my-order/app-my-order.vue';
	import tastlist from '../../pages/tasklist/tasklist.vue'

	export default {
		name: 'user-center',
		data() {
			return {
				value: {
					background: `#f7f7f7`,
					color: '#f7f7f7',
					placeholder: '搜索',
					radius: 28,
					textColor: '#c0c0c0',
					textPosition: `center`,
					shadow: `0 16rpx 32rpx rgba(0, 0, 0, 0.1);`
				},
				type: '',
				navs: [],
				banners: [],
				turnover: [],

				list: [],
				page: 1,
				limit: 20,
				page_count: 1,
				issuchop: false,
				issuclogin: false,
				imgprefix: this.$siteInfo.imgroot,
				// 10.26
				time: new Date().getTime(),
				applyimg: [],
				// 返回顶部
				top: 400,
				scrollTop: 0,
				opacity: 0,

				isguide: false,

				canUserProfile: getApp().globalData.canIUseGetUserProfile, // 10.22 判断是否可以使用getUserPro
				isbind: false, // 是否绑定实体店 / 是否是群主 群主绑定实体店
				mall_id: 1
			}
		},
		mounted() {
			this.$nextTick().then(() => {
				this.$store.dispatch('userCenter/data');
			});
		},
		// 返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		components: {
			// AppUserCenterTop,
			appSearchFor,
			appNavigationIcon,
			appSwiper,
			tastlist,
			AppMyOrder,
			"app-tab-bar":appTabBar
		},
		onLoad() {
			this.issuchop = false
			// this.imgprefix = this.$siteInfo.imgroot
			if (this.$user.isLogin()) {
				let guide = this.$storage.getStorageSync('firstguide')
				if (guide == '') {
					this.isguide = true
					this.$storage.setStorageSync('firstguide', 'true')
				}
				// 判断用户是否绑定
				this.$request({
					url: this.$api.wechat_group.whether_binding
				}).then(res => {
					if (res.data.ismallbingding) {
						this.mall_id = res.data.ismallbingding.id
						this.isbind = true
					} else {
						this.isbind = false
					}
				}).catch(err => {
					this.isbind = false
				})
			}
			this.loadList()
			// this.loadnavs()
			this.allReq(5)
			this.allReq(104)
			this.allReq(669)
			this.allReq(742)
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		// 9.29 离开页面改变 弹窗显示状态
		onUnload() {
			getApp().globalData.firstapplet = false
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				title: '挣钱养家',
				path: '/pages/user-center/user-center',
				params: {

				}
			});
		},
		onShareTimeline() {
			return this.$shareTimeline({
				title: '挣钱养家',
				query: {

				}
			});
		},
		onReachBottom() {
			if (this.page < this.page_count) {
				this.page++
				this.loadList()
			} else {
				const listSt = this.$storage.getStorageSync('storeList')
				if (listSt) {
					this.list = this.list.concat(listSt)
				} else {
					this.page = 1
					this.loadList()
				}
			}
		},
		computed: {
			// 返回顶部
			showBackTop() {
				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
				return this.scrollTop > uni.upx2px(this.top);
			},
			isLogin() {
				return this.$user.isLogin();
			},
			...mapState({
				copyright: state => state.mallConfig.copyright,
				userCenter: state => state.userCenter.data,
				userInfo: state => state.user.info,
				is_icon_super_vip: function(state) {
					return state.mallConfig.mall.setting.is_icon_super_vip;
				},
				foot_bar: function(state) {
					return state.userCenter.data.foot_bar;
				}
			}),
			copyrightLink() {
				if (!this.copyright) return {};
				let {
					open_type,
					new_link_url,
					params
				} = this.copyright.link;
				return {
					openType: open_type,
					url: new_link_url,
					params: params ? params : []
				};
			},
			...mapGetters('mallConfig', {
				getTheme: 'getTheme'
			}),
			...mapGetters('iPhoneX', {
				BotHeight: 'getBotHeight',
			}),
			listStyle() {
				if (this.userCenter.menu_style == 1) return 'row';
				if (this.userCenter.menu_style == 2) return 'grid dir-left-wrap';
				return '';
			}
		},
		watch: {
			// 返回顶部
			showBackTop(nVal, oVal) {
				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
				if (nVal) {
					this.opacity = 1;
				} else {
					this.opacity = 0;
				}
			},
		},
		onShow() {
			// 9.14
			/* let sharestoreid = this.$storage.getStorageSync('sharestoreid')
			if (sharestoreid) {
				this.$storage.removeStorageSync('sharestoreid')
			} */
			this.$storage.removeStorageSync('KEFU')
			this.$event.on(this.$const.EVENT_USER_LOGIN).then(() => {
				uni.redirectTo({
					url: `/pages/user-center/user-center`
				});
			});
			if (this.$user.isLogin()) {
				this.$store.dispatch('user/refresh');
				if (this.userInfo.vdian_id != null) {
					this.$request({
						url: this.$api.apply.store,
						data: {
							id: this.userInfo.vdian_id
						},
						method: 'get',
					}).then(res => {
						if (res.data.review_status == 0) {
							this.status = 0
							this.issuchop = false
						} else if (res.data.review_status == 1) {
							this.status = 1
							this.issuchop = true
						} else if (res.data.review_status == 2) {
							this.status = 2
							this.issuchop = false
						} else {
							this.issuchop = false
						}
						// console.log(res);
					}).catch(e => {

					})
				} else {
					this.issuchop = false
				}
			} else {
				this.issuchop = false
			}
			// this.$nextTick().then(() => {
			// 	this.$store.dispatch('userCenter/data');
			// });
			// 9.27 调用父组件的方法 免费得金币
			if (this.$refs.task.show || this.$refs.task.isshow) {
				// 9.29 将showMo方法改为judgetask
				this.$refs.task.judgetask()
			}
		},
		methods: {
			// 返回首页
			goToIndex(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			// 10.22 直接获取用户信息
			getUserPro() {
				let self = this
				uni.getUserProfile({
					lang: 'zh_CN',
					desc: '获取用户信息更新数据',
					success(res) {
						let adata = {}
						if (res.userInfo.nickName) {
							adata.nickname = res.userInfo.nickName
						}
						if (res.userInfo.avatarUrl) {
							adata.avatar = res.userInfo.avatarUrl
						}
						self.$request({
							url: self.$api.sixty.editinfo,
							data: adata,
							method: 'POST',
						}).then(n => {
							self.userInfo.options.avatar = res.userInfo.avatarUrl
							self.userInfo.nickname = res.userInfo.nickName
						}).catch(e => {})
					}
				})
			},
			// 10.22 直接获取用户信息
			getUserInfo() {
				let self = this
				uni.getUserInfo({
					lang: 'zh_CN',
					success(res) {
						let adata = {}
						if (res.userInfo.nickName) {
							adata.nickname = res.userInfo.nickName
						}
						if (res.userInfo.avatarUrl) {
							adata.avatar = res.userInfo.avatarUrl
						}
						self.$request({
							url: self.$api.sixty.editinfo,
							data: adata,
							method: 'POST',
						}).then(n => {
							self.userInfo.options.avatar = res.userInfo.avatarUrl
							self.userInfo.nickname = res.userInfo.nickName
						}).catch(e => {})
					}
				})
			},
			toSearch() {
				uni.navigateTo({
					url: `/pages/bepartner/search`
				})
			},
			moveStop() {

			},
			noguide() {
				this.isguide = false
			},
			// 返回顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			jump(item) {
				if (item == '/' || item == 'javascript:;') {
					return
				}
				if (item == '/pages/index/index' || item.indexOf('/pages/gospeed/index') != -1 || item ==
					'/pages/sixty/index' || item == '/pages/user-center/user-center' || item == '/pages/store/mine/mine') {
					uni.reLaunch({
						url: item
					})
					return;
				}
				if (item.indexOf('/pages/user-center/groupcoup/groupcoup') != -1 || item.indexOf(
						'/pages/consumer/addredpak/addredpak') != -1 || item.indexOf(
						'/pages/consumer/credpaklist/credpaklist') != -1 || item.indexOf(
						'/pages/user-center/groupulist/groupulist') != -1 || item.indexOf(
						'/pages/user-center/ranklist/ranklist') != -1) {
					this.$subscribe(['M1iIhGG1LrILWYR24uHRekFmSPSfY3WG2p5MmsSRskc']).then(res => {
						// uni.navigateTo({
						// 	url: item
						// })
					}).catch(e => {
						// console.log(e, 'eee');
					})
					// return;
				}
				uni.navigateTo({
					url: item
				})
			},
			jumptostore(item) {
				uni.navigateTo({
					url: '/pages/store/mine/mine?vid=' + item.id
				})
			},
			toapply(item) {
				if (this.$store.state.user.accessToken === '' || this.$store.state.user.accessToken === null) {
					this.$store.dispatch('user/accessToken');
				} else {
					uni.navigateTo({
						url: item
					});
				}
			},
			jumpIsl(item) {
				if (this.isLogin) {
					uni.navigateTo({
						url: item
					})
				} else {
					this.$store.dispatch('user/accessToken');
				}
			},
			/* loadnavs() {
				this.$request({
					url: this.$api.topic.list,
					data: {
						type: 1
					}
				}).then((res) => {
					this.navs = res.data.list.filter((item) => {
						this.$set(item, 'url', '/pages/video/explain/explain?id=' + item.id + '&title=' +
							item.title);
						this.$set(item, 'open_type', 'navigate');
						return item
					})
				}).catch(err => {

				})
			}, */
			goUser() {
				uni.navigateTo({
					url: '/pages/user-center/personal/personal'
					// url: '/pages/user-center/jewstore/jewstore'
				})
			},
			callLogin() {
				this.$store.dispatch('user/accessToken');
			},
			toMyStore() {
				uni.redirectTo({
					url: '/pages/store/mine/mine'
				})
			},
			allReq(pid) {
				this.$request({
					url: this.$api.navs.list,
					data: {
						pid: pid,
						status: 1
					}
				}).then((res) => {
					if (pid == 5) {
						this.banners = res.data.list
					} else if (pid == 104) {
						this.turnover = res.data.list
					} else if (pid == 669) {
						this.navs = res.data.list
					} else if (pid == 742) {
						this.applyimg = res.data.list
					}
				}).catch(() => {

				})
			},
			loadList() {
				this.$request({
					url: this.$api.apply.list,
					data: {
						page: this.page,
						limit: 20,
						review_status: 1
					}
				}).then((res) => {
					this.list = this.list.concat(res.data.list)
					this.page_count = res.data.pagination.page_count
					this.$storage.setStorageSync('storeList', this.list)
				}).catch(err => {
					// console.log(err);
				})
			},
			appStatus(id) {
				let self = this
				self.$request({
					url: self.$api.apply.store,
					data: {
						id: id
					},
					method: 'get',
				}).then(res => {
					this.name = res.data.name
					if (res.data.review_status == 0) {
						this.status == 0
					} else if (res.data.review_status == 1) {
						this.status == 1
						this.issuchop = true
					} else if (res.data.review_status == 2) {
						this.status == 2
					}
					// console.log(res);
				}).catch(e => {

				})
			},
		}
	}
</script>

<style scoped lang="scss">
	// 10.26 弹窗
	.movable {
		position: fixed;
		top: 0;
		left: 0;
		pointer-events: none;
		z-index: 1001;
		width: 750rpx;
		height: 100%;

		.movable-item {
			pointer-events: auto;
			width: 200rpx;
			height: 98rpx;
			// height: 200rpx;
		}

		.quick {
			width: 200rpx;
			// height: 200rpx;
			height: 98rpx;
		}
	}

	.opensuc {
		width: 686rpx;
		display: flex;
		color: #fff;
		align-items: center;
		justify-content: space-between;
		padding-top: 32rpx;

		.sucimgs {
			display: flex;
			align-items: center;

			image {
				width: 52rpx;
				height: 52rpx;
			}
		}

		.sucshop {
			font-size: 42rpx;
			padding-left: 16rpx;
		}

		.checkshop {
			font-size: 32rpx;
		}
	}

	.user-shop {
		position: relative;
		height: 416rpx;
		// background-image: url(https://ceshi.senmainet.com/web/uploads/mall1/20210324/51e720ff8e5835d84ad75fc546ff50d4.png);
		background-size: cover;
		background-repeat: no-repeat;
	}

	.user-shop::after {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		content: '';
		background: rgba(0, 0, 0, 0.2);
	}

	.user-info {
		width: 686rpx;
		color: #fff;
		height: 144rpx;
		position: absolute;
		// top: 148rpx;
		left: 32rpx;
		z-index: 999;
	}

	.ucenter {
		font-size: 56rpx;
		color: #FFFFFF;
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 18rpx;
		// width: 256rpx;
		width: 406rpx;
		text-align: center;
		padding: 10rpx 20rpx;
		// margin: 32rpx 406rpx;
		margin: 32rpx 286rpx;
	}

	.user-info-some {
		width: 686rpx;
		display: flex;
		align-items: center;
		color: #fff;
		height: 144rpx;
	}

	.nologin {
		width: 686rpx;
		display: flex;
		color: #fff;
		height: 144rpx;
		position: absolute;
		top: 148rpx;
		left: 32rpx;
		z-index: 999;
		font-size: 46rpx;

		.avatar {
			height: 144rpx;
			width: 144rpx;
			border-radius: 50%;
		}
	}

	.nologin .login-btn {
		// padding-left: 32rpx;
		width: 416rpx;
		line-height: 144rpx;
	}

	.user-info .nickname {
		padding-left: 32rpx;
		width: 416rpx;
	}

	.user-info .nickname .nick-nick {
		font-size: 44rpx;
		line-height: 68rpx;
		font-weight: bold;
	}

	.dir-bottom-data {
		font-size: 28rpx;
		color: #FFFFFF;
		border: 1rpx solid #ffffff;
		border-radius: 18rpx;
		width: 180rpx;
		text-align: center;
		padding: 10rpx 20rpx;
	}

	// 10.22 添加刷新按钮
	.refre-button {
		font-size: 28rpx;
		color: #FFFFFF;
		border: 1rpx solid #ffffff;
		border-radius: 18rpx;
		text-align: center;
		margin: 0;
		padding: 5rpx 24rpx;
		line-height: 48rpx;
	}

	.user-info .nickname .nick-shop {
		font-size: 24rpx;
		line-height: 36rpx;
		margin-top: 30rpx;
	}

	.user-info .complaint {
		width: 120rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.user-info .complaint image {
		width: 42rpx;
		height: 48rpx;
		margin-bottom: 12rpx;
		font-size: 24rpx;
	}

	.user-info .user-member-info {
		margin-top: 16rpx;
		font-size: 20rpx;
	}

	.user-info .avatar {
		height: 144rpx;
		width: 144rpx;
		border-radius: 50%;
	}

	.besuc-app {
		margin: 24rpx 0;
	}

	.topbg {
		width: 100%;

		.image {
			width: 100%;
		}
	}

	.fenxiao {
		width: 702rpx;
		margin: 24rpx auto;
		background: #FFFFFF;
		box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
		padding: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333333;
		font-size: 28rpx;
		font-weight: bold;

		.fx-image {
			width: 12rpx;
			height: 22rpx;

			.arrow {
				width: 12rpx;
				height: 22rpx;
			}
		}
	}

	.search-area {
		height: #{88rpx};
		line-height: #{88rpx};
		width: 100%;
		background-color: #f7f7f7;
		padding: #{12rpx} #{24rpx};

		.search {
			height: #{58rpx};
			line-height: #{58rpx};
			border-radius: #{32rpx};
			background-color: #f7f7f7;
			color: #c0c0c0;
			font-size:#{26rpx};
			box-shadow: 0 16rpx 32rpx rgba(0, 0, 0, 0.1);

			&.be-search {
				color: #353535;
				padding-left: 32rpx;

				.icon-search {
					margin-right: 10rpx;
				}
			}

			.icon-search {
				height: #{24rpx};
				width: #{24rpx};
				margin-top: #{20rpx};

				&+text {
					color: #b2b2b2;
					margin:0 #{8rpx};
				}
			}
		}
	}

	.today {
		width: 686rpx;
		margin: 20rpx auto;
		box-shadow: 0px 30px 60px rgba(57, 57, 57, 0.1);
		border-radius: 32rpx;
		display: flex;
		align-items: center;

		.image {
			width: 100%;
			height: 100%;
		}
	}

	.open-store {
		text-align: center;
		display: flex;
		/* flex-wrap: wrap; */
		flex-direction: column;
		align-items: center;
	}

	.subimgs {
		width: 240rpx;
		height: 240rpx;

		image {
			width: 240rpx;
			height: 240rpx;
		}
	}

	.suc-shop {
		font-size: 48rpx;
		margin-top: 32rpx;
	}

	.check-shop {
		padding: 24rpx 36rpx;
		background: #342B2A;
		color: #fff;
		width: 300rpx;
		text-align: center;
		border-radius: 16rpx;
		margin-top: 24rpx;
	}

	.app-my-service {
		width: #{702rpx};
		border-radius: #{16rpx};
		margin: #{24rpx} auto;
		box-shadow: 0 0 #{8rpx} rgba(0, 0, 0, .05);
		background: #fff;

		.title {
			padding: #{32rpx} #{32rpx} #{16rpx};
			border-bottom: 2rpx solid #f4f3f3;
			color: #333333;
			font-size: 28rpx;
			font-weight: bold;
		}

		.list {
			.item {
				.icon {
					width: #{56rpx};
					height: #{56rpx};
					display: block;
				}

				.arrow {
					width: #{12rpx};
					height: #{22rpx};
				}
			}
		}

		.list.row {
			.item-container {
				padding: #{20rpx} #{32rpx};
			}

			.icon {
				margin-right: #{16rpx};
			}
		}

		.list.grid {
			.item {
				width: 25%;

				.icon {
					margin-bottom: #{28rpx};
				}

				.name {
					padding: 0 #{12rpx};
					font-size: $uni-font-size-weak-one;
					color: $uni-general-color-one;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.item-container {
				padding: #{24rpx} 0;
			}
		}
	}

	.u-foot-box {
		position: relative;
		height: 104upx;
	}

	.u-icon {
		margin-top: 44upx;
		width: 40upx;
		height: 40upx;
		margin-right: 17upx;
	}

	.u-foot-item {
		font-size: #{26rpx};
		color: #666666;
		padding-top: #{14rpx};
		width: 50%;
	}

	.u-foot-info {
		text-align: center;
	}

	.u-foot-num {
		font-size: 32upx;
		margin-bottom: 10upx;
	}

	.u-line {
		height: 40upx;
		width: 2upx;
		background-color: #666666;
		position: absolute;
		top: 45upx;
		left: 50%;
		margin-left: -2upx;
	}

	// 领券
	.coll-coupon {
		width: 686rpx;
		height: 196rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		margin: 24rpx auto;
		border-radius: 32rpx;

		.coll-image {
			width: 100%;
			height: 100%;
		}
	}

	.coupon-video {
		width: 686rpx;
		height: 396rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		border-radius: 16px;

		.video-item {
			width: 332rpx;
			height: 396rpx;
			border-radius: 32rpx;
			overflow: hidden;
			background: #FFFFFF;
			position: relative;

			.video-cover {
				position: absolute;
				width: 100%;
				height: 100%;
			}

			.video-play {
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.video-explain {
				position: absolute;
				width: 332rpx;
				height: 62rpx;
				background: rgba(0, 0, 0, 0.4);
				backdrop-filter: blur(9px);
				border-radius: 0 0 32rpx 32rpx;
				bottom: 0;
				left: 0;
				text-align: center;
				color: #FFFFFF;
				line-height: 62rpx;
				font-size: 24rpx;
			}
		}
	}

	// 转发说明
	.zf-explain {
		width: 686rpx;
		margin: 32rpx auto;
		background-color: #342B2A;
		border-radius: 32rpx;
		padding: 48rpx;
		color: #FFFFFF;

		.zf-top {
			display: flex;

			.zf-image {
				width: 36rpx;
				height: 36rpx;
			}

			.zf-text {
				font-weight: bold;
				font-size: 28rpx;
				line-height: 36rpx;
				margin-left: 16rpx;
			}
		}

		.zf-bottom {
			margin-top: 16rpx;
			color: #F4F4F4;
			font-size: 24rpx;
			line-height: 34rpx;
			text-align: justify;
		}
	}

	// 常见问题
	.common-problem {
		background-color: #FFFFFF;
		padding: 0 0 16rpx;

		.common-title {
			width: 750rpx;
			height: 382rpx;
			position: relative;
			color: #FFFFFF;

			.common-image {
				width: 100%;
				height: 100%;
			}

			.common-text {
				font-weight: bold;
				font-size: 48rpx;
				position: absolute;
				top: 100rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		.common-trouble {
			width: 686rpx;
			margin: 0 auto;

			.common-trouble-item {
				width: 686rpx;
				margin: 0 auto;

				.common-trouble-title {
					width: 686rpx;
					color: #666666;
					font-size: 24rpx;
					line-height: 72rpx;
					height: 72rpx;
					text-align: center;
					position: relative;

					&:before {
						content: '';
						width: 82rpx;
						height: 2rpx;
						background-color: #e0e0e0;
						color: #e0e0e0;
						display: block;
						top: 50%;
						left: 34%;
						position: absolute;
						transform: translate(-50%, -50%);
					}

					&:after {
						content: '';
						width: 82rpx;
						height: 2rpx;
						background-color: #e0e0e0;
						color: #e0e0e0;
						display: block;
						top: 50%;
						right: 34%;
						position: absolute;
						transform: translate(50%, -50%);
					}
				}

				.common-trouble-content {
					width: 100%;

					.common-content-item {
						margin-bottom: 32rpx;
						position: relative;

						.common-content-avatar {
							width: 48rpx;
							height: 48rpx;
							border-radius: 24rpx;
							text-align: center;
							line-height: 48rpx;
							font-size: 28rpx;
							position: absolute;
							bottom: 0;

							&.left {
								left: 0;
								background: #342B2A;
								color: #FFFFFF;
							}

							&.right {
								right: 0;
								background: #E0E0E0;
								color: #333333;
							}
						}

						.common-content-text {
							width: 526rpx;
							padding: 20rpx 48rpx;
							margin: 0 auto;
							line-height: 34rpx;
							text-align: justify;

							&.question {
								background: #342B2A;
								color: #FFFFFF;
								font-size: 28rpx;
							}

							&.answer {
								background: #E0E0E0;
								color: #333333;
								font-size: 24rpx;
							}
						}
					}
				}
			}
		}
	}

	.bepartner {
		width: 686rpx;
		height: 136rpx;
		margin: 20rpx auto;
		position: relative;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.bebg {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.bebg image {
		height: 136rpx;
		width: 136rpx;
	}

	.beimg {
		width: 96rpx;
		height: 96rpx;
		position: absolute;
		left: 106rpx;
		top: 20rpx;
	}

	.beimg image {
		width: 96rpx;
		height: 96rpx;
	}

	.befont {
		position: absolute;
		left: 234rpx;
		line-height: 136rpx;
		font-size: 36rpx;
		color: #333333;
		font-weight: bold;
	}

	// 营业额
	.moturnover {
		width: 686rpx;
		margin: 20rpx auto;

		.moturnover-item {
			margin: 20rpx auto;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			// height: ;
			image {
				width: 328rpx;
			}
		}

		.moturnover-bottom {
			width: 100%;
			margin: 20rpx auto;

			image {
				width: 100%;
			}
		}
	}

	/* 营业额 */
	.beturnover {
		display: flex;
		justify-content: space-between;
		width: 686rpx;
		margin: 20rpx auto;
	}

	.besturnover {
		background: #FFFFFF;
		width: 328rpx;
		height: 128rpx;
		border-radius: 16rpx;
		padding: 20rpx 0;
		font-size: 24rpx;
		text-align: center;
		color: #333333;
		box-shadow: 0px 5rpx 10rpx rgba(57, 57, 57, 0.1);
	}

	.besturnover text {
		text-align: center;
		font-size: 68rpx;
		font-weight: bold;
		line-height: 108rpx;
		margin-right: 12rpx;
	}

	/* 营业额 */
	.beturnovers {
		background: #FFFFFF;
		width: 686rpx;
		height: 128rpx;
		border-radius: 16rpx;
		margin: 20rpx auto;
		color: #333333;
		font-size: 28rpx;
		text-align: center;
		box-shadow: 0px 5rpx 10rpx rgba(57, 57, 57, 0.1);
	}

	.beturnovers text {
		font-size: 72rpx;
		font-weight: bold;
		line-height: 128rpx;
		margin: 0 24rpx;
	}

	// 小店循环
	.beturnstore {
		background: #FFFFFF;
		width: 686rpx;
		height: 128rpx;
		border-radius: 16rpx;
		margin: 20rpx auto;
		color: #333333;
		display: flex;
		align-items: center;
		padding: 0 48rpx;
		box-shadow: 0px 5rpx 10rpx rgba(57, 57, 57, 0.1);
	}

	.beturnimage {
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
	}

	.beturnimage .image {
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
	}

	.beturntext {
		font-size: 28rpx;
		color: #333333;
		padding-left: 32rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	// 返回顶部
	.quick-box {
		position: fixed;
		bottom: #{40rpx};
		right: #{48rpx};
		z-index: 100;
		transition: opacity 0.4s;
	}

	.quick-btn {
		width: #{80rpx};
		height: #{80rpx};
		margin-top: #{32rpx};
	}

	// 引导
	.guideuser {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		// background: #000;
		// opacity: 0.7;
		background: rgba($color: #000000, $alpha: 0.7);
		z-index: 99999;

		.guideb {
			width: 236rpx;
			text-align: center;
			padding: 13rpx 27rpx;
			position: absolute;
			top: 202rpx;
			left: 180rpx;
			border: 2rpx dashed #FFFFFF;
			border-radius: 24rpx;
		}

		.guidecenter {
			font-size: 28rpx;
			color: #FFFFFF;
			border: 1rpx solid #ffffff;
			border-radius: 18rpx;
			width: 180rpx;
			text-align: center;
			padding: 10rpx 20rpx;
			/* position: absolute;
			top: 216rpx;
			left: 208rpx; */
		}

		.guideimg {
			position: absolute;
			width: 212rpx;
			height: 122rpx;
			left: 174rpx;
			top: 292rpx;
		}

		.guidec {
			width: 44rpx;
			height: 36rpx;
			position: absolute;
			left: 572rpx;
			top: 368rpx;
		}

		.guidecon {
			position: absolute;
			left: 50%;
			top: 425rpx;
			transform: translateX(-50%);
			width: 412rpx;
			border-radius: 24rpx;
			border: 2rpx dashed rgba(255, 255, 255, 0.7);
			padding: 48rpx;
			font-size: 24rpx;
			line-height: 34rpx;
			color: #FFFFFF;
		}

		.guidenow {
			position: absolute;
			width: 198rpx;
			height: 84rpx;
			left: 50%;
			transform: translateX(-50%);
			top: 820rpx;

			.guiimg {
				width: 198rpx;
				height: 84rpx;
			}
		}
	}
</style>
